<template>
    <nav>
        <router-link to="/money" class="item" active-class="selected">
            <Icon iconname="money"/>
            记账
        </router-link>

        <router-link to="/labels" class="item" active-class="selected">
            <Icon iconname="labels"/>
            标签
        </router-link>

        <router-link to="/statistics" class="item" active-class="selected">
            <Icon iconname="statistics"/>
            统计
        </router-link>
    </nav>
</template>

<script lang="ts">
    import Vue from 'vue';
    import {Component} from 'vue-property-decorator';

    @Component
    export default class Nav extends Vue {
        mounted() {

            setTimeout(() => {
                window.scrollTo(0, window.innerHeight);

            }, 1);


        }
    }
</script>

<style lang="scss" scoped>

    nav {
        position: fixed;
        bottom: 0;
        width: 100%;
        background: white;
        display: flex;
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
        flex-direction: row;
        font-size: 12px;

        > .item {
            color: #333;
            padding: 2px 0;
            width: 33.33333%;
            display: flex;
            text-decoration: none;
            justify-content: center;
            align-items: center;
            flex-direction: column;


            .icon {
                width: 32px;
                height: 32px;
            }
        }

        > .item.selected {
            color: red;
        }
    }
</style>